<template>
  <div class="content flex">
      <div class="default">
          <div class="uni-page-head-bd">交易密码</div>
      </div>
    <wc-keyboard
      v-model="value"
      inter="6"
      decimal="2"
      placeholder=""
      label=""
    />
    <div class="btn" @click="change">提交</div>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
export default {
  data () {
    return {
      value: '',
      mobile: ''
    }
  },
  mounted: function () {
    this.mobile = this.$route.query.mobile
  },
  methods: {
    change () {
      axios({
        method: 'post',
        url: 'http://dev.518jinsha.com/' + 'home/index/third',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        },
        data: qs.stringify({ tradepassword: this.value, mobile: this.mobile })
      }).then(res => {
        this.$layer.msg(res.data.msg)
        this.$router.push({
          // 核心语句
          path: 'user', // 跳转的路径
          query: { // 路由传参时push和query搭配使用 ，作用时传递参数
            mobile: this.mobile
          }
        })
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.content {
  background: #fff;
  width: auto;
  height: auto;
  position: absolute;
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
  flex-direction: column;
  .keyboard {
    height: 45px;
    border: 1px solid #00c456;
    width: 270px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -42.5px;
    margin-left: -135px;
  }
  .default {
      position: absolute;
      left: -10px;
      top: -10px;
      right: -10px;
      background: rgb(15, 174, 255);
      .uni-page-head-bd {
        height: 26px;
        text-align: center;
        color: #fff;
        padding: 7px 3px;
      }
  }
  .btn {
      height: 44px;
      width: 80%;
      position: absolute;
      bottom: 20px;
      cursor: pointer;
      left: 50%;
      margin-left: -40%;
      font-size: 14px;
      background: rgb(15, 174, 255);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
  }
}
</style>
